<!-- 我的简历页面 -->
<template>
    <div>
      <!-- 头部 -->
      <reception-header/>
      
      <canvas id="roadModel5" v-show="false"></canvas>
      
      <!-- 简历部分 -->
      <div class="user">
        <div class="da-wrapper">
          <div class="da-content">
            <div class="container">
              <div class="zaixian">
                <div class="title">
                  <span class="title-style">在线简历</span>
                </div>
              </div>
              <div class="btn-resume">               
                  <el-button class="button-style" size="mini" type="primary" icon="el-icon-edit" @click="editResume" v-show="myselfLogin">在线编辑</el-button>
                  <el-button class="button-style" size="mini" type="success" icon="el-icon-printer" @click="exportResumeHandleWord">导出(word)</el-button>
                  <el-button class="button-style" size="mini" type="success" icon="el-icon-printer" @click="exportResumeHandlePDF">导出(PDF)</el-button>
              </div>
              <div class="main-container" id="pdfDom">
                <div class="user-main-info">
                  <el-row>
                    <el-col :span="3">
                      <div class="avatar">
                        <el-avatar id="resumeAvatar" shape="square" :size="100" fit="content" :src="form.avatar" crossorigin="anonymous"></el-avatar>
                      </div>
                    </el-col>
                    <el-col :span="21">
                      <div>
                        <div>
                          <span class="name">{{form.name}}&nbsp;</span>
                          <span><el-tag size="mini" class="tag">{{form.currentIdentity}}</el-tag></span>
                        </div>
                        <div>
                          <div>
                            <span class="word-style">{{form.sex}}&emsp;&emsp;|&emsp;&emsp;</span>
                            <span class="word-style">{{form.age}}岁&emsp;&emsp;|&emsp;&emsp;</span>
                            <span class="word-style">{{form.city}}&emsp;&emsp;|&emsp;&emsp;</span>
                            <span class="word-style">{{form.outlook}}&emsp;&emsp;</span>
                          </div>
                        </div>
                        <div class="basic-info-bottom">
                          <span class="word-style"><i class="el-icon-mobile"></i></span>
                          <span class="word-style">&nbsp;{{form.phone}}&emsp;&emsp;</span>
                          <span class="word-style"><i class="el-icon-message"></i></span>
                          <span class="word-style">&nbsp;{{form.email}}&emsp;&emsp;</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>  
                </div>
                <!-- 求职状态 -->
                <div>
                  <span class="job-state">求职状态&nbsp;</span>
                  <el-tag size="mini" effect="dark" type="danger" class="tag">必填</el-tag>
                  <div class="huntjobState">{{form.huntjobState}}</div>
                </div>
                <!-- 求职意向 -->
                <div>
                  <span class="job-state">求职意向&nbsp;</span>
                  <el-tag size="mini" effect="dark" type="danger" class="tag">必填</el-tag>
                  <div class="expect">
                    <el-descriptions :title="form.expectWork">
                      <el-descriptions-item label="期望薪资">{{form.expectSalary}}</el-descriptions-item>
                      <el-descriptions-item label="期望城市">{{form.expectCity}}</el-descriptions-item>
                      <el-descriptions-item label="期望行业">{{form.expectIndustry}}</el-descriptions-item>
                  </el-descriptions>
                  </div>
                </div>
                <!-- 教育经历 -->
                <div class="education-experience">
                  <span class="job-state">教育经历&nbsp;</span>
                  <el-tag size="mini" effect="dark" type="danger" class="tag">必填</el-tag>
                  <div class="expect">
                    <el-descriptions>
                      <el-descriptions-item label="毕业学校">{{form.school}}</el-descriptions-item>
                      <el-descriptions-item label="学历">{{form.highestEducation}}</el-descriptions-item>  
                      <el-descriptions-item label="所学专业">{{form.major}}</el-descriptions-item> 
                    </el-descriptions>
                  </div>
                </div>
                <!-- 工作/实习经历 -->
                <div class="education-experience">
                  <span class="job-state">工作 / 实习经历&nbsp;</span>
                  <el-tag size="mini" effect="dark" type="danger" class="tag">必填</el-tag>
                   <div class="expect">
                    <el-descriptions :title="form.companyName">
                      <el-descriptions-item label="负责岗位">{{form.companyPosition}}</el-descriptions-item>
                      <el-descriptions-item label="薪资">{{form.internshipWorkSalary}}</el-descriptions-item>  
                      <el-descriptions-item label="公司类别">{{form.companyType}}</el-descriptions-item> 
                      <el-descriptions-item label="工作描述"><span style="white-space: pre-wrap;">{{form.internshipWorkDescription}}</span></el-descriptions-item> 
                    </el-descriptions>
                  </div>
                </div>
                <!-- 项目经历 -->
                <div class="education-experience">
                  <span class="job-state">项目经历&nbsp;</span>
                   <div class="expect">
                    <el-descriptions :title="form.projectName">
                      <el-descriptions-item label="项目描述"><span style="white-space: pre-wrap;">{{form.projectDescription}}</span></el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <!-- 语言能力 -->
                <div class="education-experience">
                  <span class="job-state">语言能力&nbsp;</span>
                   <div class="expect">
                    <el-descriptions>
                      <el-descriptions-item label="英语等级">{{form.englishLevel}}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <!-- 专业技能 -->
                <div class="education-experience">
                  <span class="job-state">专业技能&nbsp;</span>
                   <div class="expect">
                    <el-descriptions>
                      <el-descriptions-item label="技能描述">{{form.skillDescription}}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                 <!-- 证书 -->
                <div class="education-experience">
                  <span class="job-state">证书&nbsp;</span>
                   <div class="expect">
                     <span>{{form.certificate}}</span>
                  </div>
                </div>
                 <!-- 个人优势 -->
                <div class="education-experience">
                  <span class="job-state">个人优势&nbsp;</span>
                   <div class="expect">
                     <span style="white-space: pre-wrap;">{{form.personalAdvantange}}</span>
                  </div>
                </div>
                 <!-- 自我评价 -->
                <div class="education-experience">
                  <span class="job-state">自我评价&nbsp;</span>
                   <div class="expect">
                     <span style="white-space: pre-wrap;">{{form.selfEvaluation}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 -->
      <the-footer/>
    </div>
</template>

<script>
// 导出为word的引入
import JSZipUtils from 'jszip-utils';
import JSZip from 'jszip';
import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater';
import ImageModule from "docxtemplater-image-module-free";
import { saveAs } from 'file-saver';

// 导出为pdf的引入
import { downloadPDF,getBase64 } from '../../utils/html2canvas';

import ReceptionHeader from '../../components/ReceptionHeader.vue';
import TheFooter from '../../components/The-Footer.vue';
import { getStore } from '../../storage/storage';
import { queryLoginUserResume } from '../../api/personalApi/index';
import { getCurrentLoginRoleName } from '../../api/dataViewApi/index';
export default {
  components: { ReceptionHeader, TheFooter },
  data () {
    return {
      interModelCanvasId: 'roadModel5', // 路口模型对应的id
      form:{
        avatar: '', //简历头像
        name: '', // 姓名
        currentIdentity: '', // 当前身份
        sex: '', // 性别（返回1：男；返回0：女）
        age: '', // 年龄
        city: '', // 城市
        outlook: '', // 政治面貌
        phone: '', // 手机号
        email: '', // 邮箱
        huntjobState: '', // 求职状态
        expectWork: '', // 意向工作
        expectSalary: '', // 期望薪资
        expectCity: '', // 期望工作的城市
        expectIndustry: '', // 期望的行业
        highestEducation: '', // 最高学历
        school: '', // 毕业院校
        major: '', // 所学专业
        companyName: '', // 工作或实习的公司名称
        companyPosition: '', // 实习或工作的公司岗位
        internshipWorkSalary: '', // 实习或工作的薪资
        companyType: '', // 实习或工作的公司类别
        internshipWorkDescription: '', //实习或工作的时候负责的工作
        projectName: '', // 项目名称
        projectDescription: '', // 项目描述
        englishLevel: '', // 英语等级
        skillDescription: '', // 技能描述
        certificate: '', // 证书
        selfEvaluation: '', // 自我评价
        personalAdvantange: '', // 个人优势
      },
      interImg: '',
      myselfLogin: false,
      userAid: this.$route.query.userAid,  // 点击简历传过来的参数
    }
  },
  created(){
    // 查询当前登陆的用户的简历信息
    this.queryLoginUserResumefunc();
    // 画布上面画图
    this.created_page();
    // 判断当前登陆的角色
    this.checkLoginRole();
  },
  methods:{

    // 判断当前登陆的角色
    checkLoginRole(){
      const params = {
        account: getStore("account")
      }
      getCurrentLoginRoleName(params).then(res=>{
        if (res.data.data.remarks === '企业') {
          this.myselfLogin = false;
        }else{
          this.myselfLogin = true;
        }
      })
    },

    // 查询当前登陆的用户的简历信息
    queryLoginUserResumefunc(){
      const params = {
        account: getStore("account"),
        userAid: this.userAid,
      }
      queryLoginUserResume(params).then(res=>{
        // console.log(res);
        if(res.data.data[0].avatar !== null){
          this.form.avatar = res.data.data[0].avatar;
        }else{
          this.form.avatar = 'https://recruitment-files.oss-cn-chengdu.aliyuncs.com/user/hr1.jpg';
        }
        this.form.name = res.data.data[1].name;
        this.form.currentIdentity = (res.data.data[0] === null) ? '身份未知' : res.data.data[0].currentIdentity;
        this.form.sex = res.data.data[1].gender === 0 ? '女' : '男';
        this.form.age = res.data.data[0] === null ? '未知几' : (new Date().getFullYear() - parseInt(res.data.data[0].birth.substr(0,4)) - 1);
        this.form.city = res.data.data[0] === null ? '未知' : res.data.data[0].city.substr(2,4);
        this.form.outlook = res.data.data[0] === null ? '未知' : res.data.data[0].outlook;
        this.form.phone = res.data.data[1].phone.replace(res.data.data[1].phone.substr(3,6),'****');
        this.form.email = res.data.data[1].email;
        this.form.huntjobState = res.data.data[0] === null ? '未知' : res.data.data[0].huntjobState;
        this.form.expectWork = res.data.data[0] === null ? '未知' : res.data.data[0].expectWork;
        this.form.expectSalary = res.data.data[0] === null ? '未知' : res.data.data[0].expectSalary;
        this.form.expectCity = res.data.data[0] === null ? '未知' : res.data.data[0].expectCity;
        this.form.expectIndustry = res.data.data[0] === null ? '未知' : res.data.data[0].expectIndustry;
        this.form.highestEducation = res.data.data[0] === null ? '未知' : res.data.data[0].highestEducation;
        this.form.school = res.data.data[0] === null ? '未知' : res.data.data[0].school;
        this.form.major = res.data.data[0] === null ? '未知' : res.data.data[0].major;
        this.form.companyName = res.data.data[0] === null ? '未知' : res.data.data[0].companyName;
        this.form.companyPosition = res.data.data[0] === null ? '未知' : res.data.data[0].companyPosition;
        this.form.internshipWorkSalary = res.data.data[0] === null ? '未知' : res.data.data[0].internshipWorkSalary;
        this.form.companyType = res.data.data[0] === null ? '未知' : res.data.data[0].companyType;
        this.form.internshipWorkDescription = res.data.data[0] === null ? '未知' : res.data.data[0].internshipWorkDescription;
        this.form.projectName = res.data.data[0] === null ? '未知' : res.data.data[0].projectName;
        this.form.projectDescription = res.data.data[0] === null ? '未知' : res.data.data[0].projectDescription;
        this.form.englishLevel = res.data.data[0] === null ? '未知' : res.data.data[0].englishLevel;
        this.form.skillDescription = res.data.data[0] === null ? '未知' : res.data.data[0].skillDescription;
        this.form.certificate = res.data.data[0] === null ? '未知' : res.data.data[0].certificate;
        this.form.personalAdvantange = res.data.data[0] === null ? '未知' : res.data.data[0].personalAdvantange;
        this.form.selfEvaluation = res.data.data[0] === null ? '未知' : res.data.data[0].selfEvaluation;
      });
    },
    
    // 去编辑简历的页面
    editResume(){
      this.$router.push("/reception/editMyResume");
    },

    created_page(){
      setTimeout(() => {
        this.show = true
        this.$nextTick(() => {
          var canvas = document.getElementById('roadModel5')
  
          var context = canvas.getContext('2d')
  
          var imgbg = new Image()
          imgbg.setAttribute("crossOrigin",'anonymous')
  
          imgbg.src = this.form.avatar
  
          imgbg.onload = function () {
            // console.log(imgbg.complete)
            if (imgbg.complete) {
              context.drawImage(imgbg, 0, 0, 300, 150)          
            }
          }
        })
      }, 100);
    },

    // 导出简历(word)
    exportResumeHandleWord(){
      const _this = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("input.docx", function(error, content) {
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }

        let interModelCanvas = document.getElementById(_this.interModelCanvasId)
        if (interModelCanvas) {
          // 路口模型图片
          _this.interImg = interModelCanvas.toDataURL();
        }
        interModelCanvas = undefined;

        let opts = {
          centered: false,
          getImage (tagValue, tagName) {
              return new Promise((resolve, reject) => {
                JSZipUtils.getBinaryContent(tagValue, (error, content) => {
                    if (error) {
                    return reject(error)
                    }
                    return resolve(content)
                })
              })
          },
          getSize (img, tagValue, tagName) {
              return [100, 100]
          }
        }
        const imageModule = new ImageModule(opts)
        const zip = new PizZip(content)
        const doc = new docxtemplater()
          .loadZip(zip)
          .attachModule(imageModule)
          .compile()
        doc.resolveData({
          name: _this.form.name, // 姓名
          avatar: _this.interImg, //简历头像
          currentIdentity: _this.form.currentIdentity, // 当前身份
          sex: _this.form.sex, // 性别（返回1：男；返回0：女）
          age: _this.form.age, // 年龄
          city: _this.form.city, // 城市
          outlook: _this.form.outlook, // 政治面貌
          phone: _this.form.phone, // 手机号
          email: _this.form.email, // 邮箱
          huntjobState: _this.form.huntjobState, // 求职状态
          expectWork: _this.form.expectWork, // 意向工作
          expectSalary: _this.form.expectSalary, // 期望薪资
          expectCity: _this.form.expectCity, // 期望工作的城市
          expectIndustry: _this.form.expectIndustry, // 期望的行业
          highestEducation: _this.form.highestEducation, // 最高学历
          school: _this.form.school, // 毕业院校
          major: _this.form.major, // 所学专业
          companyName: _this.form.companyName, // 工作或实习的公司名称
          companyPosition: _this.form.companyPosition, // 实习或工作的公司岗位
          internshipWorkSalary: _this.form.internshipWorkSalary, // 实习或工作的薪资
          companyType: _this.form.companyType, // 实习或工作的公司类别
          internshipWorkDescription: _this.form.internshipWorkDescription, //实习或工作的时候负责的工作
          projectName: _this.form.projectName, // 项目名称
          projectDescription: _this.form.projectDescription, // 项目描述
          englishLevel: _this.form.englishLevel, // 英语等级
          skillDescription: _this.form.skillDescription, // 技能描述
          certificate: _this.form.certificate, // 证书
          selfEvaluation: _this.form.selfEvaluation, // 自我评价
          personalAdvantange: _this.form.personalAdvantange, // 个人优势
        })
        .then(() => {
          try {
            doc.render()
          } catch (err) {
            throw err
          }
          const out = doc.getZip().generate({
          type: 'blob',
          mimeType:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          })
          saveAs(out, "简历.doc") // 注意这里加下后缀，因为有些地方导出文件类型的文件，不能识别类型
        });
      })
    },

     // 导出简历(PDF)
    exportResumeHandlePDF(){
      // getBase64(this.form.avatar);
      downloadPDF(document.querySelector('#pdfDom'),this.form.name + '-简历');
    },

  }
}
</script>

<style scoped>
@import '../../assets/css/reception/myResumePage.css';
</style>
